<template>
	<view class="wrapper">
		<view class="goods-box">
			<view class="goods-no">
				订单编号：{{orderDetail.order_sn}}
			</view>
			<view v-for="(item,index) in orderDetail.goodsList" :key="index" class="goods">
				<image :src="imgUrl+item.goods_image+'?'+num" mode="aspectFit"></image>
				<view class="goods-r">
					<view class="goods-tit">
						{{item.goods_name}}
					</view>
					<view class="goods-sku">
						{{item.goods_model?item.goods_model:'默认规格'}}
					</view>
					<view class="goods-pay">
						购买数量：{{item.goods_number}}
					</view>
				</view>
			</view>
		</view>
		<view class="detail-li">
			<view class="detail-li-l">
				修改价格：
			</view>
			<input v-model="price" type="number" placeholder="输入修改价格" placeholder-style="color:#d1d1d1" />
		</view>
		
		<view class="order-btn-box">
			<view @click="changeBtn" class="order-btn">
				确定
			</view>
		</view>
		<!-- 提示窗 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import { MARKET_EASY } from '../../utils/enum.js'
	export default {
		data() {
			return {
				orderDetail:null,//订单数据
				MARKET_EASY,
				imgUrl:'',
				num:Math.random(),
				id:0,
				price:'',
			}
		},
		onLoad(e) {
			// this.id = e.id
			// this.id = 9
			// console.log(decodeURIComponent(e.item))
			this.orderDetail=JSON.parse(decodeURIComponent(e.item))
		},
		onShow(){
			this.imgUrl = this.api.imgUrl
			
		},
		methods: {
			changeBtn(){
				this.api._post('Order/updateOrderprice',{
					price:this.price,
					order_id:this.orderDetail.order_id
				}).then(res=>{
					if(res.status==200){
						this.$refs.uToast.show({
							title:res.message,
							type: 'success'
						})
						let setT = setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
							clearTimeout(setT)
						},1000)
					}else{
						this.$refs.uToast.show({
							title:res.message,
							type: 'error'
						})
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import url('../../common/common.css');
	.wrapper {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		width: 100%;
		min-height: 100%;
		padding-bottom: 150upx;
		box-sizing: border-box;
	}
	page {
		background: #f7f7f7;
	}
	
	.goods-box{
		width: 100%;
		margin-top: 20upx;
		margin-bottom: 20upx;
		// height:306px;
		background:rgba(255,255,255,1);
		border-radius:6upx;
		padding: 30upx 32upx;
		box-sizing: border-box;
		.goods-no{
			font-size:24upx;
			font-family:PingFangSC;
			font-weight:400;
			color:rgba(51,51,51,1)
		}
		.goods{
			margin-top: 23upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			>image{
				width:200upx;
				height:200upx;
				background:rgba(240,240,240,1);
				border-radius:6upx;
			}
			.goods-r{
				width: 443upx;
				height: 200upx;
				margin-left: 20upx;
				display: flex;
				justify-content: flex-start;
				align-items:flex-start;
				flex-direction: column;
				.goods-tit{
					width: 100%;
					height: 70upx;
					font-size:28upx;
					font-family:PingFangSC;
					font-weight:600;
					color:rgba(51,51,51,1);
					overflow : hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.goods-sku{
					margin-top: 10upx;
					font-size:24upx;
					font-family:PingFangSC;
					font-weight:400;
					color:rgba(51,51,51,1);
				}
				.goods-pay{
					margin-top: 20upx;
					font-size:24upx;
					font-family:PingFangSC;
					font-weight:400;
					color:rgba(153,153,153,1);
				}
			}
		}
	}
	.detail-box{
		margin-top: 20upx;
		width: 100%;
	}
	.detail-li{
		width: 100%;
		padding: 32upx 40upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		.detail-li-l{
			font-size:28upx;
			font-family:PingFangSC;
			font-weight:400;
			color:rgba(51,51,51,1);
		}
		>input{
			text-align: right;
			font-size:28rpx;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(153,153,153,1);
		}
		.detail-li-r{
			width: 65%;
			text-align: right;
			font-size:28upx;
			font-family:PingFangSC;
			font-weight:500;
			color:rgba(51,51,51,1);
		}
		.border-bot{
			border-bottom: 1upx solid #EEEEEE;
		}
		.red-text{
			color: #F70000;
		}
	}
	.order-btn-box{
		width: 100%;
		height: 150upx;
		bottom: 0;
		background: #f7f7f7;
		position: fixed;
	}
	.order-btn{
		position: absolute;
		bottom:30upx;
		left: 50%;
		transform: translateX(-50%);
		width:400upx;
		height:80upx;
		background:rgba(247,0,0,1);
		box-shadow:0px 2upx 24upx 0px rgba(251,88,88,1);
		border-radius:40upx;
		text-align: center;
		line-height: 80upx;
		font-size:34upx;
		font-family:PingFangSC;
		font-weight:400;
		color:rgba(255,255,255,1);
	}
</style>
